<template>
  <div class="search-comp flex flex-cc bd-bottom bcl-white">
    <div class="flex-1">
      <n-input type="text" placeholder="搜索" v-model:value="keyword">
        <template #prefix>
          <n-icon size="20">
            <SearchOutline></SearchOutline>
          </n-icon>
        </template>
      </n-input>
    </div>

    <n-dropdown
      trigger="click"
      :options="options"
      :show-arrow="true"
      @select="handleSelect"
    >
      <div class="flex flex-center p-5 ml-5 hover radius click">
        <n-icon size="20" color="#C4C4C4">
          <AddCircleOutline></AddCircleOutline>
        </n-icon>
      </div>
    </n-dropdown>

    <!-- 搜索结果 -->
    <div class="result" v-if="keyword">
      <SearchViewComp :keyword="keyword"></SearchViewComp>
    </div>
  </div>
</template>

<script setup>
import { ref, h, computed, onMounted } from 'vue'
import { NImage } from 'naive-ui'
import store from '@/store'
import SearchViewComp from './SearchViewComp.vue'
import { getItem } from '@/ui/util/storageHelper'
import { SearchOutline, AddCircleOutline } from '@vicons/ionicons5'
import { getImageUrl } from '@/kang/js/utils'
import api from '@/kang/js/api'

import mitt from '@/kang/js/mitt'

const keyword = ref('')
const options = ref([
  {
    label: '创建群组',
    key: 'group',
    icon: renderIcon(getImageUrl('icon_add_group')),
  },
  {
    label: '添加好友',
    key: 'friend',
    icon: renderIcon(getImageUrl('icon_add_friend')),
  },
])

const selectUserConfig = ref(null)

// 好友列表
const friendList = computed(() => {
  return store.state.contact.favContactList.concat(
    store.state.contact.friendList
  )
})

onMounted(() => {
  mitt.on('clearKeyword', () => {
    keyword.value = ''
  })
})

// 创建群组
async function addGroup({ selectedUserList }) {
  try {
    const params = {
      name: selectedUserList.map((v) => v.name).join('、'),
      owner: getItem('userId'),
      type: 0,
      members: selectedUserList.map((v) => {
        return {
          memberId: v.id,
        }
      }),
    }

    selectUserConfig.value.loading = true
    const { code } = await api.addGroup(params)
    selectUserConfig.value.loading = false

    if (code === 200) {
      $message.success('创建成功')
      selectUserConfig.value.visible = false
    }
  } catch (err) {
    selectUserConfig.value.loading = false
  }
}

function handleSelect(e) {
  if (e === 'group') {
    selectUserConfig.value = {
      title: '创建群组',
      submitBtnText: '确认创建',
      list: friendList.value.map((v) => {
        return {
          id: v.uid,
          avatar: v.portrait,
          name: v.displayName || v.userName,
          isSelected: false,
        }
      }),
      visible: true,
      loading: false,
      onSubmit: (e) => addGroup(e),
    }
    mitt.emit('dialog:selectUser', selectUserConfig.value)
  } else if (e === 'friend') {
    mitt.emit('dialog:addFriend')
  }
}

function renderIcon(icon) {
  return () => {
    return h(NImage, {
      src: icon,
      width: '20',
      height: '20',
      previewDisabled: true,
    })
  }
}
</script>

<style lang="scss" scoped>
.search-comp {
  position: relative;
  height: 50px;
  padding: 10px;

  :deep(.n-input) {
    height: 35px;
    border-radius: 100px;
    background-color: var(--color-bg);

    .n-input__border {
      display: none;
    }
  }

  .result {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    height: calc(100vh - 80px);
    z-index: 1000;
  }
}
</style>
